<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">

    <mat-drawer-container class="flex-auto h-full">

        <!-- Drawer -->
        <mat-drawer
            class="w-80"
            [autoFocus]="false"
            [mode]="drawerMode"
            [opened]="drawerOpened"
            #matDrawer>

            <div class="flex flex-col flex-auto h-full dark:bg-default">

                <!-- Watchlist -->
                <div class="flex flex-col flex-0">
                    <div
                        class="flex flex-0 items-center p-5 border-b"
                        *ngFor="let item of data.watchlist">
                        <div class="flex flex-col flex-auto pr-6">
                            <div class="flex items-baseline">
                                <div class="mr-1 font-medium text-md text-secondary">{{item.title}}</div>
                                <div class="font-medium text-sm text-hint uppercase tracking-wider">({{item.iso}})</div>
                            </div>
                            <div class="flex items-end mt-2">
                                <div class="min-w-20 font-mono text-2xl tracking-tighter leading-none">
                                    {{item.amount | currency:'USD':'symbol':'1.2-4'}}
                                </div>
                                <mat-icon
                                    class="text-green-500 icon-size-3.5 mx-0.5 mb-px"
                                    [ngClass]="{'text-green-500': item.trend.dir === 'up', 'text-red-500': item.trend.dir === 'down'}"
                                    [svgIcon]="item.trend.dir === 'up' ? 'heroicons_solid:arrow-narrow-up' : 'heroicons_solid:arrow-narrow-down'"></mat-icon>
                                <div
                                    class="font-mono font-medium text-sm leading-none mb-px"
                                    [ngClass]="{'text-green-500': item.trend.dir === 'up', 'text-red-500': item.trend.dir === 'down'}">
                                    {{item.trend.amount}}%
                                </div>
                            </div>
                        </div>
                        <apx-chart
                            class="flex flex-auto items-center h-10 overflow-hidden"
                            [chart]="watchlistChartOptions.chart"
                            [colors]="item.trend.dir === 'up' ? ['#48BB78']: ['#F56565']"
                            [series]="item.series"
                            [stroke]="watchlistChartOptions.stroke"
                            [tooltip]="watchlistChartOptions.tooltip"
                            [xaxis]="watchlistChartOptions.xaxis"></apx-chart>
                    </div>
                </div>

                <!-- Buy / Sell -->
                <div class="flex flex-col flex-auto flex-shrink-0 pt-6 bg-gray-50 dark:bg-transparent">

                    <!-- Action -->
                    <div class="flex flex-col px-6 pb-2">
                        <mat-form-field>
                            <mat-label>Action</mat-label>
                            <span
                                class="flex items-center justify-center"
                                matPrefix>
                                <ng-container *ngIf="buySellSelect.value === 'buy'">
                                    <mat-icon
                                        class="icon-size-5"
                                        [svgIcon]="'heroicons_solid:download'"></mat-icon>
                                </ng-container>
                                <ng-container *ngIf="buySellSelect.value === 'sell'">
                                    <mat-icon
                                        class="icon-size-5"
                                        [svgIcon]="'heroicons_solid:upload'"></mat-icon>
                                </ng-container>
                            </span>
                            <mat-select
                                [value]="'buy'"
                                #buySellSelect="matSelect">
                                <mat-option [value]="'buy'">Buy</mat-option>
                                <mat-option [value]="'sell'">Sell</mat-option>
                            </mat-select>
                        </mat-form-field>
                    </div>

                    <!-- Wallet -->
                    <div class="flex flex-col px-6 pb-2">
                        <mat-form-field class="w-full">
                            <mat-label>Wallet</mat-label>
                            <mat-select
                                [value]="'btc'"
                                #walletSelector="matSelect">
                                <mat-select-trigger>
                                    <span class="flex items-center">
                                        <span>{{walletSelector.triggerValue}}</span>
                                        <span class="mx-1 text-hint">-</span>
                                        <span class="flex items-center font-mono">
                                            <span>{{data.wallets[walletSelector.value]}}</span>
                                            <span class="ml-1">{{walletSelector.value | uppercase}}</span>
                                        </span>
                                    </span>
                                </mat-select-trigger>
                                <mat-option [value]="'btc'">Bitcoin</mat-option>
                                <mat-option [value]="'eth'">Ethereum</mat-option>
                                <mat-option [value]="'bch'">Bitcoin Cash</mat-option>
                                <mat-option [value]="'xrp'">XRP</mat-option>
                            </mat-select>
                            <mat-hint class="flex items-center">
                                <span class="mr-1">USD:</span>
                                <span class="font-mono font-medium text-normal">
                                    {{data.wallets[walletSelector.value] * data.prices[walletSelector.value] | currency:'USD'}}
                                </span>
                            </mat-hint>
                        </mat-form-field>
                    </div>

                    <!-- Buy form -->
                    <form
                        class="flex flex-col px-6"
                        *ngIf="buySellSelect.value === 'buy'">
                        <mat-form-field class="w-full">
                            <mat-label>Amount</mat-label>
                            <input
                                matInput
                                autocomplete="off"
                                #buyAmount>
                            <mat-select
                                [value]="'coin'"
                                matSuffix
                                #buyType="matSelect">
                                <mat-option [value]="'coin'">{{walletSelector.value | uppercase}}</mat-option>
                                <mat-option [value]="'usd'">USD</mat-option>
                            </mat-select>
                            <span
                                matPrefix
                                *ngIf="buyType.value === 'usd'">
                                $
                            </span>
                            <mat-hint class="flex items-center">
                                <ng-container *ngIf="buyType.value === 'coin'">
                                    <span class="mr-1">It will cost:</span>
                                    <span class="font-mono font-medium text-normal">
                                        {{buyAmount.value * data.prices[walletSelector.value] | currency:'USD':'symbol':'1.2-4'}}
                                    </span>
                                </ng-container>
                                <ng-container *ngIf="buyType.value === 'usd'">
                                    <span class="mr-1">You will receive:</span>
                                    <span class="font-mono font-medium text-normal">
                                        {{buyAmount.value / data.prices[walletSelector.value] | number:'1.2-6'}} {{walletSelector.value | uppercase}}
                                    </span>
                                </ng-container>
                            </mat-hint>
                        </mat-form-field>
                        <button
                            class="mt-4 mb-8"
                            mat-flat-button
                            [color]="'primary'">
                            BUY
                        </button>
                    </form>

                    <!-- Sell form -->
                    <form
                        class="flex flex-col px-6"
                        *ngIf="buySellSelect.value === 'sell'">
                        <mat-form-field class="w-full">
                            <mat-label>Amount</mat-label>
                            <input
                                matInput
                                autocomplete="off"
                                #sellAmount>
                            <mat-select
                                [value]="'coin'"
                                matSuffix
                                #sellType="matSelect">
                                <mat-option [value]="'coin'">{{walletSelector.value | uppercase}}</mat-option>
                                <mat-option [value]="'usd'">USD</mat-option>
                            </mat-select>
                            <span
                                matPrefix
                                *ngIf="sellType.value === 'usd'">
                                $
                            </span>
                            <mat-hint class="flex items-center">
                                <ng-container *ngIf="sellType.value === 'coin'">
                                    <span class="mr-1">You will receive:</span>
                                    <span class="font-mono font-medium text-normal">
                                        {{sellAmount.value * data.prices[walletSelector.value] | currency:'USD':'symbol':'1.2-4'}}
                                    </span>
                                </ng-container>
                                <ng-container *ngIf="sellType.value === 'usd'">
                                    <span class="mr-1">You will sell:</span>
                                    <span class="font-mono font-medium text-normal">
                                        {{sellAmount.value / data.prices[walletSelector.value] | number:'1.2-6'}} {{walletSelector.value | uppercase}}
                                    </span>
                                </ng-container>
                            </mat-hint>
                        </mat-form-field>
                        <button
                            class="mt-4 mb-8"
                            mat-flat-button
                            [color]="'primary'">
                            SELL
                        </button>
                    </form>
                </div>

            </div>

        </mat-drawer>

        <!-- Content -->
        <mat-drawer-content class="flex flex-col">

            <!-- BTC Price -->
            <div class="flex flex-col flex-auto min-h-full bg-card dark:bg-default">
                <div class="flex flex-wrap items-center pl-4 pr-6 py-3 md:pl-6 border-b">
                    <button
                        class="mr-6 lg:hidden"
                        mat-icon-button
                        (click)="matDrawer.toggle()">
                        <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
                    </button>
                    <div class="flex flex-col flex-auto my-3 mr-6">
                        <div class="flex items-center">
                            <div class="font-medium text-2xl text-secondary mr-2">Bitcoin</div>
                            <div class="font-medium text-lg text-hint tracking-wider">(BTC)</div>
                        </div>
                        <div class="flex items-end mt-1">
                            <div class="mr-2 font-mono text-3xl leading-none tracking-tight">{{data.btc.amount | currency:'USD':'symbol':'1.2-2'}}</div>
                            <mat-icon
                                class="text-green-500 icon-size-5 mr-0.5 mb-px"
                                [ngClass]="{'text-green-500': data.btc.trend.dir === 'up', 'text-red-500': data.btc.trend.dir === 'down'}"
                                [svgIcon]="data.btc.trend.dir === 'up' ? 'heroicons_solid:arrow-narrow-up' : 'heroicons_solid:arrow-narrow-down'"></mat-icon>
                            <div
                                class="font-mono font-medium text-lg leading-none mb-px"
                                [ngClass]="{'text-green-500': data.btc.trend.dir === 'up', 'text-red-500': data.btc.trend.dir === 'down'}">
                                {{data.btc.trend.amount}}%
                            </div>
                        </div>
                    </div>
                    <div class="hidden sm:flex items-center my-3">
                        <div class="p-4 leading-none rounded-l-xl border border-r-0">
                            <div class="text-sm font-medium text-secondary">Market Cap</div>
                            <div class="mt-2 font-mono text-xl">{{(data.btc.marketCap / 1000000000) | number: '1.0-2' | currency}}B</div>
                        </div>
                        <div class="p-4 leading-none border border-r-0">
                            <div class="text-sm font-medium text-secondary">Volume</div>
                            <div class="mt-2 font-mono text-xl">{{(data.btc.volume / 1000000000) | number: '1.0-2' | currency}}B</div>
                        </div>
                        <div class="p-4 leading-none border border-r-0">
                            <div class="text-sm font-medium text-secondary">Supply</div>
                            <div class="mt-2 font-mono text-xl">{{(data.btc.supply / 1000000) | number: '1.0-2'}}M</div>
                        </div>
                        <div class="p-4 leading-none rounded-r-xl border">
                            <div class="text-sm font-medium text-secondary">All Time High</div>
                            <div class="mt-2 font-mono text-xl">{{data.btc.allTimeHigh | currency:'USD'}}</div>
                        </div>
                    </div>
                </div>
                <div class="relative flex flex-auto bg-gray-50 dark:bg-transparent">
                    <apx-chart
                        class="relative w-full h-160 md:absolute md:inset-0 md:h-auto overflow-hidden"
                        [chart]="btcOptions.chart"
                        [colors]="btcOptions.colors"
                        [dataLabels]="btcOptions.dataLabels"
                        [grid]="btcOptions.grid"
                        [legend]="btcOptions.legend"
                        [series]="btcOptions.series"
                        [stroke]="btcOptions.stroke"
                        [tooltip]="btcOptions.tooltip"
                        [xaxis]="btcOptions.xaxis"
                        [yaxis]="btcOptions.yaxis"
                        #btcChartComponent></apx-chart>
                </div>
            </div>

        </mat-drawer-content>

    </mat-drawer-container>

</div>
